<template>
  <el-container>
    <el-header height="auto" class="ht-header-border">
      <el-form :model="headersearch" label-width="80px" :inline="true">
        <el-form-item label="数据类型">
          <el-select placeholder="" v-model="headersearch.dictype">
            <el-option label="请选择数据类型" :value="0"></el-option>
            <el-option
              v-for="(item, index) in sysdic_types"
              :key="index"
              :label="item.dicType"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据名称">
          <el-input
            v-model="headersearch.dicKeyValue"
            placeholder="请输入数据名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadPageSysDic">查询</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <div class="ht-pd-10">
        <el-button
          type="primary"
          class="ht-pl-pr-10"
          style="width:80px"
          @click="$router.push({ path: '/admin/sysdictionary$create' })"
          size="mini"
          >新增</el-button
        >
      </div>
      <div class="dic-table">
        <el-table :data="sysdic_tabledata" border stripe v-loading="loading">
          <el-table-column
            v-for="col in sysdic_tableColums"
            :prop="col.field"
            :key="col.field"
            :label="col.label"
            :width="col.width"
          >
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-link
                type="primary"
                class="ht-mr-10"
                @click="
                  $router.push({
                    path: `/admin/sysdictionary$modify/${scope.row.id}`
                  })
                "
                >编辑</el-link
              >
              <el-link type="primary" @click="delDic(scope.row.id)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="size_change"
          @current-change="current_change"
          :current-page="current_page"
          :page-sizes="[20, 40, 80, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum"
          background
        >
        </el-pagination>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      loading: false,
      sysdic_tabledata: [],
      sysdic_tableColums: [
        {
          label: "数据名称",
          field: "dicKeyValue"
        },
        {
          label: "数据类型",
          field: "dicTypeName"
        }
      ],
      current_page: 1,
      pageSize: 20,
      totalNum: 0,
      headersearch: { dicKeyValue: "", dictype: 0 },
      sysdic_types: []
    };
  },
  methods: {
    loadPageSysDic() {
      this.loading = true;
      this.$http
        .post("/sysDic/getSysDicBypage", {
          page: this.current_page,
          pageSize: this.pageSize,
          dicKeyValue: this.headersearch.dicKeyValue,
          dicType: this.headersearch.dictype
        })
        .then(res => {
          this.loading = false;
          if (res.data.errorCode == "SUCCESS") {
            /**
             * @type{IPage}
             */
            const ipage = res.data.returnData;
            this.totalNum = this.$_.toInteger(ipage.total);
            this.sysdic_tabledata = ipage.records;
            this.current_page = this.$_.toInteger(ipage.current);
          } else {
            this.$message({
              type: "warning",
              message: res.data.errorMessage
            });
          }
        })
        .catch(res => {
          this.loading = false;
          console.log(res);
        });
    },
    current_change(page) {
      this.current_page = page;
      this.tableDataLoad();
    },
    size_change(pagesize) {
      this.pageSize = pagesize;
      this.tableDataLoad();
    },
    getAllDictype() {
      this.$http.get("/sysdic/getAllDictype").then(res => {
        if (res.data.errorCode == "SUCCESS") {
          this.sysdic_types = res.data.returnData;
        } else {
          this.$message({
            type: "warning",
            message: res.data.errorMessage
          });
        }
      });
    },
    async delDic(id) {
      const res = await this.$http.post("/sysdic/delDicById", {
        id: id
      });
      if (res.data.errorCode == "SUCCESS") {
        this.loadPageSysDic();
      } else {
        this.$message({
          type: "warning",
          message: res.data.errorMessage
        });
      }
    }
  },
  created() {
    this.getAllDictype();
    this.loadPageSysDic();
  }
};
</script>

<style lang="scss"></style>
